import React from 'react'

/*
    state
    state只有类组件中才有，函数式组件没有state(可以用Hooks模拟出state)

    state的特点：与vue中的data有点像，只有通过this.setState()修改state，视图才会自动更新
    在类组件中，state的声明发生在constructor这个生命周期中

    在React中，state声明的，只能this.state来访问,不能通过this

    在React中，修改state声明式变量，一定要使用this.setState()这个api来修改，否则会遇到声明式变量确实变了，但视图没有更新

    修改state的标准语法:this.setState({},callback)/this.setState(fn1,callback)
    说明:callback表示state修改已完成时的回调。

    this.setState()是异步的，只有在定时器里面是同步的，其他都是异步

    在React中，原则上不要直接修改state中的变量，要使用this.setState()来修改

    我们已经知道this.setState()有两种语法
    语法1:this.setState({},callback) 当你修改state时，新的state和旧的state没有关系时，(也就说，新state不是由旧的state计算而来)建议使用语法1
    语法2:this.setState((s,p)=>({}),callback)你修改state时，新的state和旧的state有关系时(也就说，新state是由旧的state计算而来)


    在同一个{}代码块中，如果连续多次调用this.setState()，只触发一次render，只触发一次diff运算,再进一步只触发一次视图更新，因为react会自动合并this.setState()的操作(浅合并),目的是为了尽可能的减少diff运算，提升性能
*/


export default class TestState extends React.Component{
    constructor(props){

        super(props)
        //声明式变量在这里进行定义
        this.state={
            count:1,
            list:[],
            flag:true,
            user:{
                name:'sml',
                age:18
            },
            hello:'Hello'
        }
    }
    add() {
        // 方法一
        // this.setState({
        //     count:this.state.count+1
        // },()=>{
        //     console.log('最新的count',this.state.count);
        // })
        // 方法二
        this.setState(state=>{
            return{
                count:state.count+1
            }
        },()=>{
            console.log('最新的count',this.state.count);
        })
    }
    render(){
        return(
            <div>
                <h1>好好学习</h1>
                <h2>{this.state.count}</h2>
                <button onClick={()=>this.setState(state=>({count:state.count+1}))}>增加1</button>
                <button onClick={()=>this.add()}>增加2</button>
            </div>
        )
    }
}